<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--360浏览器优先以webkit内核解析-->
<title>JeeThink介绍</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link href="../static/css/font-awesome.min.css"
	th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
<link href="../static/css/main/animate.min.css"
	th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
<link href="../static/css/main/style.min862f.css"
	th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
</head>

<body class="gray-bg">
	<div class="row  border-bottom white-bg dashboard-header">
		<div class="col-sm-12" id="notice">

				<!--欢迎使用JeeThink-Student学生信息管理系统   <font style="color:red;">功能接收定制哦，欢迎骚扰...</font></blockquote>
				<h4>功能介绍：</h4>
				<ol>
					<li>管理员角色：1、管理教师信息  2、管理学生信息  3、管理班级信息  4、系统管理（角色管理、岗位管理、菜单管理）...</li>		
					<li>主任角色：   1、管理教师信息  2、管理学生信息  3、管理班级信息   ...</li>		
					<li>教师角色：   1、查看个人信息  2、管理班级学生信息  3、管理通知公告  ...</li>		
					<li>学生角色：   1、查看个人信息  2、查看通知公告 ...</li>					
				</ol>
				<h4>如需定制：</h4>
				<ol>
					<li>请将您的需求内容整理后，发送邮件至：<a href="mailto:jeethinkvip@163.com">jeethinkvip@163.com</a></li>		
					
				</ol>-->
			<hr>
		</div>
	</div>
	<div class="wrapper wrapper-content">
		<div class="row">
		<div class="col-sm-4">

				<div class="ibox float-e-margins">
					<!--<div class="ibox-title">
						<h5>联系信息</h5>
					</div>-->
					<div class="ibox-content">
						<div id="main1" style="width: 400px;height:200px;"></div>
						<!--<p>
							<i class="fa fa-send-o"></i> 官网：<a href="http://fj.cma.gov.cn/"
								target="_blank">http://fj.cma.gov.cn/</a>
						</p>
						<p>
							<i class="fa fa-cny"></i> <a href="http://fj.cma.gov.cn/"
														 target="_blank">福建省气象局</a>
						</p>-->
					</div>
				</div>
			</div>

			<div class="col-sm-4">

				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div id="main2" style="width: 400px;height:200px;"></div>
					</div>
					<!--<div class="ibox-title">
						<h5>技术选型：</h5>
					</div>
					<div class="ibox-content">
						<p>
							核心框架：Spring Boot、Shiro、MyBatis、Thymeleaf、Bootstrap 。
						</p>
					</div>-->
				</div>
			</div>

			<div class="col-sm-4">

				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div id="main3" style="width: 400px;height:200px;"></div>
					</div>
					<!--<div class="ibox-title">
						<h5>技术选型：</h5>
					</div>
					<div class="ibox-content">
						<p>
							核心框架：Spring Boot、Shiro、MyBatis、Thymeleaf、Bootstrap 。
						</p>
					</div>-->
				</div>
			</div>
		</div>
	</div>

	</div>
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script src="../static/jeethink/js/jt-ui.js" th:src="@{/jeethink/js/jt-ui.js?v=2.0}"></script>
	<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
	<script type="text/javascript">
		$('#pay-qrcode').click(function() {
			var html = $(this).html();
			parent.layer.open({
				title : false,
				type : 1,
				closeBtn : false,
				shadeClose : true,
				area : [ '600px', 'auto' ],
				content : html
			});
		});

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main1'));
		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '男女人数'
			},
			tooltip: {},
			legend: {
				data:['人数']
			},
			xAxis: {
				data: ["男","女"]
			},
			yAxis: {},
			series: [{
				name: '人数',
				type: 'bar',
				data: []
			}]
		};


		var myChart2 = echarts.init(document.getElementById('main2'));
		var option2= {
			title: {
				text: ' 归属组织人数',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			/*legend: {
				orient: 'vertical',
				left: 'left',
				data: ['龙岩', '宁德']
			},*/
			series: [
				{
					name: '来源',
					type: 'pie',
					radius: '55%',
					center: ['50%', '55%'],
					data: [
						{value: 335, name: '龙岩'},
						{value: 310, name: '宁德'}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		myChart2.setOption(option2);

		var myChart3 = echarts.init(document.getElementById('main3'));
		var option3 = {
			title: {
				text: ' 年龄分布 '
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: [] //['10 岁 ', '20 岁 ', '17 岁 ']
			},
			series: [
				{
					name: ' ',
					type: 'bar',
					itemStyle: {
						normal: {
							// 随机显示
							//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
							// 定制显示（按顺序）
							color: function(params) {
								var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
								return colorList[params.dataIndex]
							}
						}
					},
					data:[]// [2, 6, 3]
				}
			]
		};

		myChart3.setOption(option3);


		$().ready(function(){

			//$("#content-main").text("hello")
			var data ={pageSize: 10,pageNum: 1,status:0 };
			$.post(  "/system/notice/list",data, function(result){
                var rows=result.rows;
                for(var i=0;i<rows.length;i++){
                    var noticeTile=rows[i].noticeTitle;
                    var notice_id=rows[i].noticeId;
                    if(rows[i].noticeType==2){//公告
                        $("#notice").append('<blockquote class="text-warning" style="font-size: 18px" ><a  onclick="notice(\'' + notice_id + '\')">'+"公告："+noticeTile+'</a> </blockquote>');
                    }else{//通知
                        $("#notice").append('<blockquote class="text-info" style="font-size: 18px" ><a  onclick="notice(\'' + notice_id + '\')">'+"通知："+noticeTile+' </blockquote>');
                    }
                }
			});

			$.post(  "/cadre/cadre/getSexCount",{}, function(result){
				// 使用刚指定的配置项和数据显示图表。
				console.log(result);
				option.series[0].data=result.sexCount;
				myChart.setOption(option);

				option2.series[0].data=result.deptCount;
				myChart2.setOption(option2);

				option3.yAxis.data=result.ageNameList;
				option3.series[0].data=result.ageCount;

				myChart3.setOption(option3);
			});
		})
        function notice(id, width, height) {
           // var _url = $.operate.detailUrl(id);
            var _url = "/system/notice/detail_main/"+id;
            var _width = "800";
            var _height = $(window).height() - 150;
            //如果是移动端，就使用自适应大小弹窗
            if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
                _width = 'auto';
                _height = 'auto';
            }
            var options = {
                title: "详情",
                width: _width,
                height: _height,
                url: _url,
                skin: 'layui-layer-gray',
                btn: ['关闭'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        }
	</script>
</body>
</html>
